<template>
	<view class="container">
		<HeadNav title="记分工具" back />
		<view class="top">
			<view class="minus-box" @tap="store.handleMinus(0)">
				<uni-icons type="minus" size="48" color="#fff"></uni-icons>
			</view>
			<view class="count-box">
				{{store.redCount}}
			</view>
			<view class="plus-box" @tap="store.handlePlus(0)">
				<uni-icons type="plus" size="48" color="#fff"></uni-icons>
			</view>
			<button type="default" class="reset-btn" @tap="store.handleReset(0)">重置</button>
		</view>
		<view class="bottom">
			<button type="default" class="reset-btn" @tap="store.handleReset(1)">重置</button>
			<view class="minus-box" @tap="store.handleMinus(1)">
				<uni-icons type="minus" size="48" color="#fff"></uni-icons>
			</view>
			<view class="count-box">
				{{store.blueCount}}
			</view>
			<view class="plus-box" @tap="store.handlePlus(1)">
				<uni-icons type="plus" size="48" color="#fff"></uni-icons>
			</view>

		</view>
	</view>
</template>

<script setup>
	// import {
	// 	ref
	// } from 'vue';
	import HeadNav from '@/components/HeadNav'
	import {
		useScoringtoolStore
	} from '@/stores/modules/scoringtool'

	const store = useScoringtoolStore()

	// const redCount = ref(20)
	// const blueCount = ref(20)

	// const handleMinus = (countType) => {
	// 	if (countType === 1) {
	// 		blueCount.value = blueCount.value - 1 < 0 ? 0 : blueCount.value - 1
	// 	} else {
	// 		redCount.value = redCount.value - 1 < 0 ? 0 : redCount.value - 1
	// 	}
	// }

	// const handlePlus = (countType) => {
	// 	if (countType === 1) {
	// 		blueCount.value = blueCount.value + 1
	// 	} else {
	// 		redCount.value = redCount.value + 1
	// 	}
	// }

	// const handleReset = (countType) => {
	// 	if (countType === 1) {
	// 		blueCount.value = 20
	// 	} else {
	// 		redCount.value = 20
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		box-sizing: border-box;
		// background: linear-gradient(to bottom, #FF7F50, #1E90FF, #7FFF00, #FF6347);
		font-family: PingFangSC-Regular, sans-serif;
		background-color: #f0f0ee;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.top {
		height: 44.5%;
		background-color: #FF4654;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		transform: rotate(180deg);
		position: relative;
	}

	.bottom {
		height: 44.5%;
		background-color: #5645FF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		position: relative;
	}

	.count-box {
		font-size: 120rpx;
		font-weight: 600;
	}

	.reset-btn {
		position: absolute;
		right: 16rpx;
		top: 16rpx;
	}
</style>